<template>
    <view class="chooseCouponStyle">
        <view class="couponList" :style="{ paddingBottom: isIphoneX ? 'env(safe-area-inset-bottom)' : '20rpx' }">
            <view v-for="(item, index) in couponList" :key="item.id" class="couponItem">
                <CouponItem :btnText="'去使用'" :coupon="item" @couponClick="couponClick" />
            </view>
        </view>
        <view class="emptyArea" v-if="!couponList">
            <image
                style="width: 316rpx; height: 316rpx; margin-top: 214rpx"
                src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/community/comments_null.png"
            ></image>
            <label style="margin-top: 20rpx; color: #272a37; font-size: 32rpx; line-height: 44rpx"
                >暂无可用优惠券</label
            >
        </view>
    </view>
</template>

<script>
import CouponItem from "../../../components/newCouponList/index";
import utils from "@/common/utils.js";

export default {
    name: "myCouponList",
    components: {
        CouponItem,
    },
    data() {
        return {
            isIphoneX: false,
            couponList: [],
            historyList: [],
            queryParams: {
                pageNum: 1,
                pageSize: 4,
            },
            loading: false,
            noMore: false,
        };
    },
    methods: {
        async getCouponList() {
            if (this.noMore) {
                return;
            }
            this.loading = true;
            try {
                const { data } = await this.request.httpTokenJsonRequest("/mp-api/wx/coupon/center/list", "GET");
                this.couponList = utils.filterRepetition([...this.couponList, ...data.list]);
                if (data.total <= this.couponList.length) {
                    this.noMore = true;
                }
            } catch (e) {}
            this.loading = false;
            uni.stopPullDownRefresh();
        },

        async couponClick(coupon) {
            console.log(coupon, "POPOO");
            this.request
                .httpTokenJsonRequest(
                    "/mp-api/wx/coupon/receive",
                    { templateNo: coupon.templateNo, acceptType: 0 },
                    "GET",
                    true,
                )
                .then((res) => {
                    this.helper.showToast("领取成功");
                    this.getCouponList();
                })
                .catch((data) => {
                    this.couponList.map((item) => {
                        if (coupon.templateNo === item.templateNo) {
                            item.isCanReceive = false;
                        }
                    });

                    this.helper.showToast("领取失败");
                });

            // if (data.acceptGoodsType === 1) {
            //     this.$store.commit("setCategoryIdList", data.acceptGoodsSet.split(","));
            // }
            // if (data.acceptGoodsType === 2) {
            //     this.$store.commit("setGoodsIdList", data.acceptGoodsSet.split(","));
            // }
            // uni.navigateTo({
            //     url: `/packageMall/pages/mallCoupon/index?type=${data.acceptGoodsType}`,
            // });
        },
    },
    onPullDownRefresh() {
        this.noMore = false;
        this.queryParams.pageNum = 1;
        this.getCouponList();
    },
    onReachBottom() {
        if (this.noMore) {
            return;
        }
        this.queryParams.pageNum += 1;
        this.getCouponList();
    },
    onLoad() {
        utils.checkIphoneX().then((res) => (this.isIphoneX = res));
        this.getCouponList();
    },
};
</script>

<style lang="scss" scoped>
.chooseCouponStyle {
    .couponList {
        flex: 1;
        overflow-y: auto;
        padding: 20rpx 30rpx 0;
        margin-bottom: 20rpx;
    }

    .couponItem:last-child {
        margin-bottom: 100rpx;
    }

    .couponFooter {
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 5;
        width: 100vw;
        padding-top: 20rpx;
        background-color: #ffffff;
    }

    .footerBtn {
        height: 44rpx;
        margin: 0 30rpx;
        border-radius: 24rpx;
        line-height: 44rpx;
        font-size: 30rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
        text-align: center;
    }

    .emptyArea {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}
</style>
